<template>
  <div>
      <div class="city">
          <ul>
          <li v-for="(item,index) in cities" :key="index" class="left" @mouseenter="show(index)" @mouseleave="hide(index)">
              <span>{{item}}</span>>
          </li>
          
      </ul>
      <ul class="none" v-show="ishow">
          <li v-for="(item,index) in cities1" :key="index" class="right">
              <span>{{item}}</span>>
          </li>
      </ul>
      </div>
  </div>
</template>

<script>
export default {
data () {
    return {
        cities:['广州','深圳','上海'],
        cities1:['广州1','深圳2','上海3'],
        ishow:false

    }
},
methods:{
    show(index){
        this.ishow = true
    },
     hide(index){
        this.ishow = false
    }
}
}
</script>
<style lang="less" scoped>
 .city{
     background-color: pink;
     height: 200px;
     width: 100px;
     position: relative;
     .left{
         width: 100%;
         height: 50px;
         background-color: skyblue;
         margin-bottom: 5px;
     }
     .none{
         position: absolute;
         width: 100%;
         height: 100px;
         top: 0;
         right: -100px;
         background-color: orange;
         .right{
            width: 100%;
         height: 50px;
         background-color: rgb(179, 193, 199);
         margin-bottom: 5px;
     }  
         }
     }
     
 
</style>